<!--
 * @Author: 秦福凯
 * @Date: 2024-07-23 18:39:46
 * @Description: 公共表格
 * @FilePath: \sx-school-oa\src\components\common\table\table.vue
-->
<template>
  <el-table ref="sotable"
    element-loading-text="表格数据加载中..." 
    v-if="refrashTab" :data="data" 
    :border="true" v-bind="$attrs" 
    :show-overflow-tooltip="true"
    @select="selectTab"  
    @selection-change="selectionChange">
    <template v-for="item in colunm">
      <el-table-column
        v-if="['index','selection'].includes(item.type)"
        :type="item.type"
        :prop="item.key"
        :key="item.key"
        :label="item.label" 
        :width="item.width"
        :min-width="item.minWidth"
        :align="item.align || 'center'"
        :header-align="item.headerAlign || 'center'"/>
      <template v-else>
        <!-- Vue3将 $listener 删除了，统一使用 $attrs 进行透传 -->
        <TabelColum :columu="item" v-bind="$attrs" :key="item.key" >
        </TabelColum>
    </template>
    </template>
  </el-table>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import TabelColum from './tableColum.vue'
const scrollTimer = ref()
onMounted(() => {
  autoScroll(props.isAutoScrool)
})
// 表格自动轮播
const autoScroll = (isScroll) => {
  setTimeout(() =>{
  if(sotable.value){
  const table = sotable.value.layout.table.refs
  const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild
  //鼠标放上去，停止滚动；移开，继续滚动
  tableWrapper.addEventListener('mouseover', () => {
    isScroll = false
  })
  tableWrapper.addEventListener('mouseout', () => {
    isScroll = true
  })
  // console.log(isScroll);
  if(isScroll){
    scrollTimer.value = setInterval(() => {
    tableWrapper.scrollTop += 1
    // 到达最后一行时从第一条继续
    if (tableWrapper.clientHeight + tableWrapper.scrollTop >= tableWrapper.scrollHeight) {
      tableWrapper.scrollTop = 0
    }
    }, 50)
  }
  }
  },200)
}



onBeforeUnmount(() => {
  autoScroll(false)
})

 let props = defineProps({
  data:Array,
  colunm:Array,
  isAutoScrool:{
    type:Boolean,
    default:false
  },
  // 是否单选
  ismultipleSelection:{
    type:Boolean,
    default:true
  }
 })
  // 暴露属性
let sotable = ref(null)
defineExpose({sotable})
function selectTab(val){
}

// 选择框事件
function selectionChange(list){
  console.log(props.ismultipleSelection);
  // 多选
  if(props.ismultipleSelection){
    return list
  }else{
    // 单选
    if(list.length > 1){
      sotable.value.clearSelection()
      sotable.value.toggleRowSelection(
        list[list.length - 1]
      )
    }else{
      return list
    }
  }
}



let refrashTab = ref(true)
watch(()=>props.isAutoScrool,(newVal)=>{
  // console.log(newVal)
  if(newVal){
   autoScroll(newVal)
  }
},{deep:true,immediate:true})
</script>
<script>
  
</script>

<style lang='scss' scoped>
  :deep( .el-table__header th){
    height: 45px;
    font-size: 15px;
    font-weight: bold;
    color: var(--el-text-color-primary) !important;
    background: var(--el-fill-color-light) !important;
  }
  :deep(.el-table__header .el-checkbox){
    /* display: none !important; */
  }
</style>